<template>
  <div class="indexPoll-page app-container">
    <div class="left">
      <div class="l-top">
        <span class="lt-tip" @click="classifyOpenHandle()">新增</span>
      </div>
      <el-tree ref="tree" :data="treeList" :props="{ children: 'list', label: 'modelName' }" 
      highlight-current node-key="id" :default-expanded-keys="[activeType]"
      @node-click="treeClickHandle">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <el-tooltip v-if="data.id" content="编辑" placement="top">
            <i class="el-icon-edit" @click.stop="classifyOpenHandle(data)"></i>
          </el-tooltip>
          <el-tooltip v-if="data.id" content="删除" placement="top">
            <i class="el-icon-remove-outline" @click.stop="delectHandle(data.id)"></i>
          </el-tooltip>
        </span>
      </el-tree>
    </div>
    <div class="right">
      <el-form ref="dataForm" :inline="true" label-width="82px" :model="dataForm">
        <el-form-item label="指数名称" prop="typeName">
          <el-input v-model="dataForm.typeName" clearable placeholder="请输入指数名称"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-button class="bg-green" size="small" @click="queryAllIndexType">查询</el-button>
          <el-button size="small" @click="resetForm">重置</el-button>
          <el-button v-show="activeType" type="danger" size="small" @click="addOrUpdateTypeHandle()">添加</el-button>
          <el-button size="small" type="primary" @click="goIndexPollDetails()">指数分析</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="list"
        border fit size="mini"
        max-height="637"
        :header-cell-style="{background:'#dcedff',color:'#32639d'}"
        style="width: 100%;">
        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
        <el-table-column prop="typeName" label="指数名称" align="center">
          <template slot-scope="scope">
            <span style="color: #4f95dd;cursor: pointer;" @click="goIndexPollDetails(scope.row.id)">{{ scope.row.typeName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="350" align="center">
          <template slot-scope="{row}">
            <el-button class="filter-item" size="mini" :type="row.defaultFlag?'info':'primary'" @click="setDefaultFlagHandle(row)">
              {{row.defaultFlag?'取消默认':'设为默认'}}
            </el-button>
            <el-button class="filter-item" size="mini" style="margin-left: 10px;" type="primary" icon="el-icon-edit-outline" @click="enternetValueHandle(row)">录入净值</el-button>
            <el-button class="filter-item" size="mini" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="addOrUpdateTypeHandle(row)">
              编辑
            </el-button>
            <el-button class="filter-item" size="mini" style="margin-left: 10px;" type="primary" icon="el-icon-delete" @click="delectTypeHandle(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <classifyOpen v-if="classifyOpenVisible" ref="classifyOpen" @openClose="queryAllIndexType"></classifyOpen>
    <typeOpen v-if="typeOpenVisible" ref="typeOpen" @openClose="queryAllIndexType"></typeOpen>
    <enternetValueOpen ref="enternetValueOpen" v-if="hasEnternetValueOpen" @closeOpen="queryAllIndexType"></enternetValueOpen>
  </div>
</template>

<script>
import { queryAllIndexTypeById, deleteIndexModelById, addOrUpdateIndex } from '@/api/setting'
import classifyOpen from './classifyOpen'
import typeOpen from './typeOpen'
import enternetValueOpen from './enternetValueOpen.vue'

export default {
  name: 'IndexPoll',
  components: { classifyOpen, typeOpen, enternetValueOpen },
  data() {
    return {
      hasEnternetValueOpen: false,
      dataForm: {
        typeName: ''
      },
      list0: [], // 存放 全部指数
      treeList: [
        {
          id: 0,
          modelName: '全部指数', 
          lists: [],
          list: []
        }
      ],
      list: [],
      activeType: 1,
      classifyOpenVisible: false,
      typeOpenVisible: false,
    }
  },
  created() {
    this.queryAllIndexType()
  },
  methods: {
    enternetValueHandle(row) {
      this.hasEnternetValueOpen = true
      this.$nextTick(() => {
        this.$refs.enternetValueOpen.init(row.id)
      })
    },
    goIndexPollDetails(id) {
      this.$router.push({
        path: '/indexPoll/indexPollDetails',
        query: {
          type: this.activeType,
          id
        }
      })
    },
    delectHandle(id) {
      this.$confirm('确认删除？', '提示', {
        customClass: 'del-model',
        type: 'warning'
      })
        .then(_ => {
          this.deleteIndexModelById(id)
        })
        .catch(_ => {})
    },
    classifyOpenHandle(row) {
      this.classifyOpenVisible = true
      this.$nextTick(() => {
        this.$refs.classifyOpen.init(row)
      })
    },
    addOrUpdateTypeHandle(row) {
      this.typeOpenVisible = true
      this.$nextTick(() => {
        const i = this.treeList[0].list.findIndex(item => item.id==this.activeType)
        this.$refs.typeOpen.init(this.treeList[0].list[i].id, row)
      })
    },
    delectTypeHandle(row) {
      this.$confirm('确认删除？', '提示', {
        customClass: 'del-model',
        type: 'warning'
      })
        .then(_ => {
          row.deleteFlag = 0
          addOrUpdateIndex({
            ...row
          }).then(res => {
            if(res.code == 0) {
              this.$notify({
                message: res.body,
                type: 'success',
                duration: 2000
              })
              this.queryAllIndexType()
            }
          })
        })
        .catch(_ => {})
    },
    resetForm() {
      this.$refs.dataForm.resetFields()
      this.queryAllIndexType()
    },
    deleteIndexModelById(id) {
      deleteIndexModelById({ id }).then(res => {
        this.$notify({
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.queryAllIndexType()
      })
    },
    treeClickHandle(data) {
      data.id ? this.list = data.lists.filter(item => item.deleteFlag==1) : this.list = this.list0
      this.activeType = data.id
    },
    allQuery(keyWord) {
      var arr = []
      for (var i = 0; i < this.treeList[0].lists.length; i++) {
        if (this.treeList[0].lists[i].typeName.match(keyWord) != null) {
          arr.push(this.treeList[0].lists[i])
        }
      }
      this.list = arr
    },
    // 设为默认
    setDefaultFlagHandle(row) {
      row.defaultFlag ? row.defaultFlag = 0 : row.defaultFlag = 1
      addOrUpdateIndex({
        ...row
      }).then(res => {
        if(res.code == 0) {
          this.$notify({
            message: res.body,
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    queryAllIndexType() {
      queryAllIndexTypeById({
        id: this.activeType,
        ...this.dataForm
      }).then(res => {
        this.treeList[0].list = res.body
        if(this.activeType) {
          if(this.dataForm.typeName=='') {
            let _list0 = []
            res.body.map(item => item.lists).map(item => {
              _list0 = _list0.concat(item).filter(item => item.deleteFlag==1)
            })
            this.list0 = _list0
          }
          this.treeList[0].lists = this.list0
          const i = this.treeList[0].list.findIndex(item => item.id==this.activeType)
          if(this.treeList[0].list[i]) { // 排除最后一个被删除找不到i
            this.list = this.treeList[0].list[i].lists.filter(item => item.deleteFlag==1)
          }else {
            this.list = this.treeList[0].list[0].lists.filter(item => item.deleteFlag==1)
            this.activeType = 1
          }
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.activeType)
          })
        }else {
          this.allQuery(this.dataForm.typeName)
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.indexPoll-page {
  display: flex;
  justify-content: space-between;
  .left {
    width: 16%;
    min-width: 180px;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid #ddd;
    .l-top {
      line-height: 34px;
      padding: 0 12px;
      .lt-tip {
        cursor: pointer;
        padding: 4px 8px;
        color: #fff;
        border-radius: 2px;
        background: #409EFF;
      }
    }
    .l-line {
      padding: 5px 12px;
      cursor: pointer;
      &:hover {
        background: #eee;
      }
      
    }
    .active { background: #eee; }
    ::v-deep .el-tree {
      .el-icon-edit {
        padding-left: 12px;
        color: cornflowerblue;
      }
      .el-icon-remove-outline {
        padding-left: 8px;
        color: crimson;
      }
    }
  }
  .right {
    width: calc(84% - 20px);
    padding: 6px;
    border: 1px solid #ddd;
  }

  // .del-model {
  //   .el-message-box__btns {
  //     .el-button:nth-child(1) {
  //       float:right;
  //     }
  //     .el-button:nth-child(2) {
  //       margin-right:10px;
  //       background-color:#2d8cf0;
  //       border-color:#2d8cf0;
  //     }
  //   }
  // }
}
</style>
